<template>
   <!-- 筛选区 -->
   <div class="sub-filter">
       <!-- 品牌区域  (固定的)-->
     <div class="item">
       <div class="head">品牌：</div>
       <div class="body">
         <!-- <a href="javascript:;">全部</a> -->
         <a @click="setBrand(brand)" :class="{active:brand.selected}" href="javascript:;" v-for="brand in subCateData.brands" :key="brand.id">{{brand.name}}</a>
       </div>
     </div>
     <!-- 商品规格属性 (不固定,根据商品自身筛选的属性决定) -->
      <div class="item" v-for="prd in subCateData.saleProperties" :key="prd.id">
       <div class="head">{{prd.name}}:</div>
       <div class="body">
         <!-- <a href="javascript:;">全部</a> -->
         <a @click="setPre(pre,prd.properties)" :class="{active:pre.selected}" href="javascript:;" v-for="pre in prd.properties" :key="pre.id">{{pre.name}}</a>
       </div>
     </div>
   </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'SubFilter',
  setup () {
    const subCateData = inject('subCateData')

    // 1.点击品牌实现单选
    const setBrand = (currBrand) => {
      if (currBrand.selected) return
      // 排他思想:遍历整个品牌数组,将所有项的selected 值置为 false
      subCateData.value.brands.forEach(item => {
        item.selected = false
      })
      //  给当前点击项的 selected 属性 赋值 true
      currBrand.selected = true
    }

    // 2.点击商品属性实现单选
    /**
     * currPre 当前点击项
     * currPres 当前点击项所在的规格项所有数据
     */
    const setPre = (currPre, currPres) => {
      if (currPre.selected) return
      // 排他思想 : 将当前点击项所在的规则筛选数组遍历,将所有项的selected 值置为 false
      currPres.forEach(item => {
        item.selected = false
      })
      // 当前点击项的 selected 属性 赋值 true
      currPre.selected = true
    }
    return { subCateData, setBrand, setPre }
  }

}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        display: inline-block;
        margin-right: 36px;
        margin-bottom: 20px;
        transition: all 0.3s;
        border: 1px solid #eee;
        padding: 6px;
        &.active,
        &:hover {
          color: @xtxColor;
          border-color: @xtxColor;
        }
      }
    }
  }
}
</style>
